<template>
    <div class="overflow: auto">
        <div class="query-c">
        <Button type="info" @click="insert">添加</Button>
        <!-- 所属用户:<Input v-model="value" placeholder="请输入查询内容" style="width: 200px" />  -->
        设备名称: <Input v-model="searchParam.name" placeholder="请输入查询内容" style="width: 100px" />
        类型：
        <Select v-model="searchParam.model" clearable style="width:200px">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Button type="primary" icon="ios-search" @click="getDeviceList">搜索</Button>
        </div>
        <br>
        <Table border :columns="devicesColumns" :data="devicesList"></Table>
        <br>
        <Page :total="searchParam.total"  @on-change="pageChange"/>
        <!-- 添加/编辑 -->
        <Modal
        v-model="deviceModalshow"
        title="添加/编辑"
        >
        <Form ref="deviceForm" :model="deviceForm" :rules="deviceFormRules" :label-width="100">
            <FormItem label="设备名称" prop="name">
                <Input type="text" v-model="deviceForm.name"></Input>
            </FormItem>
            <FormItem label="型号" prop="model">
                <Input type="text" v-model="deviceForm.model"></Input>
            </FormItem>
            <FormItem label="版本" prop="version">
                <Input type="text" v-model="deviceForm.version"></Input>
            </FormItem>
            <FormItem label="展示价格" prop="showDisplay">
                <Input type="text" v-model="deviceForm.showDisplay"></Input>
            </FormItem>
            <FormItem label="实际价格" prop="showPrice">
                <Input type="text" v-model="deviceForm.showPrice"></Input>
            </FormItem>
            <FormItem label="首页展示" prop="isShow">
                <RadioGroup v-model="deviceForm.isShow">
                    <Radio  label="1" border>展示</Radio>
                    <Radio  label="2" border>不展示</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="产品描述" prop="description">
                <Input v-model="deviceForm.description" type="textarea" :rows="4" placeholder="产品描述..." />
            </FormItem>
            <FormItem label="产品图" prop="image">
                    <Upload ref="upload" action="/manager/index/upload" :before-upload="handleBeforeUpload" :on-success="handleSuccess" >
                        <Button icon="ios-cloud-upload-outline" >上传</Button>
                    </Upload>
                    <img v-if="deviceForm.image" :src="deviceForm.image" class="avatar" >
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('deviceForm')">提交</Button>
                <Button @click="handleReset('deviceForm')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        <div slot="footer"></div>
    </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            const validateDisplay = (rule, value, callback) => {
                 if (!value) 
                    callback(new Error('请输入展示价格'));
                else if (!new RegExp(/^\d+(\.\d{1,2})?$/).test(value)) 
                    callback(new Error('价格输入不正确'));
                else 
                    callback();
            };
            const validatePrice = (rule, value, callback) => {
                if (!value) 
                    callback(new Error('请输入价格'));
                else if (!new RegExp(/^\d+(\.\d{1,2})?$/).test(value)) 
                    callback(new Error('价格输入不正确'));
                else 
                    callback();
            };
            return {
                devicesColumns: [
                    {
                        title: '商品名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '型号',
                        key: 'model'
                    },
                    {
                        title: '版本',
                        key: 'version'
                    },
                    {
                        title: '展示价格',
                        render: (h, params) => {
                            params.row.showDisplay = parseFloat(params.row.display / 100)
                            return h('div', params.row.showDisplay);
                        }
                    },{
                        title: '实际价格',
                        render: (h, params) => {
                            params.row.showPrice = parseFloat(params.row.price / 100)
                            return h('div', params.row.showPrice);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                isAdd: true,
                devicesList: [],
                 typeList: [
                    {
                        value: 'Jetson-Nano-Customers',
                        label: 'Jetson-Nano-Customers'
                    }
                ],
                searchParam: {name: '', model: '', pageNum: 1, pageSize: 10, total: 0},
                deviceModalshow: false,
                deviceForm: {isShow:2},
                deviceFormRules: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    model: [
                        { required: true, message: 'model cannot be empty', trigger: 'blur' }
                    ],
                    version: [
                        { required: true, message: 'version cannot be empty', trigger: 'change' }
                    ],
                    showDisplay: [
                        { required: true, validator: validateDisplay, trigger: 'change' }
                    ],
                    showPrice: [
                        { required: true, validator: validatePrice, trigger: 'change' }
                    ]
                }
            }
        },
        mounted(){
            this.getDeviceList()
        },
        methods: {
            update (index) {
                this.deviceForm = this.devicesList[index]
                this.deviceForm.showDisplay = parseFloat(this.deviceForm.display / 100)
                this.deviceForm.showPrice = parseFloat(this.deviceForm.price / 100)
                this.deviceModalshow = true
                this.isAdd = false
            },
            insert(){
                this.deviceModalshow = true
                this.isAdd = true
            },
            delete (index) {

                if(!confirm('确定删除?'))
                    return false

                this.$axios.get('/manager/devices/delete/' + this.devicesList[index].id).then(res => {
                    if(res.status){
                        this.$Message.success('删除成功');
                        this.getDeviceList()
                    }else{
                        this.$Message.error(res.message);
                    }
                }).catch(error=>{
                    console.error(error)
                })
                //this.devicesList.splice(index, 1);
            },
            pageChange(pageNum){
                this.searchParam.pageNum = pageNum
                this.getDeviceList()
            },
            getDeviceList(){
                let params = {
                    "pageSize": this.searchParam.pageSize,
                    "pageNum": this.searchParam.pageNum,
                    "conditions":[
                        {"key":"name","value":this.searchParam.name,"method":"like"},
                        {"key":"model","value":this.searchParam.model,"method":"eq"},
                        {"key":"createDate","value":"createDate","method":"desc"}
                    ]
                }

                this.$axios.post('/manager/devices/queryList',params).then(res => {
                    //console.log(res)
                    if(res.status){
                        //alert(2)
                        this.devicesList = res.data.records
                        this.searchParam.total = res.data.total
                    }else{
                        this.$Message.error(res.message);
                    }
                }).catch(error=>{
                    console.error(error)
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = this.isAdd ? '/manager/devices/insert' : '/manager/devices/update'
                        this.$axios.post(url,this.deviceForm).then(res => {
                            //console.log(res)
                            if(res.status){
                                this.$Message.success('操作成功');
                                this.getDeviceList()
                            }else{
                                this.$Message.error(res.message);
                            }
                            this.deviceModalshow = false    
                        }).catch(error=>{
                            console.error(error)
                        })
                    } else {
                        //this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSuccess(res, file) {
                if(res.status){
                    this.deviceForm.tempImage = res.data
                    this.deviceForm.image = res.data
                }
            },
            handleBeforeUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$Message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$Message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>
<style scoped>
.avatar{
    width: 137px;
}
</style>
